{% extends 'universal/myself_base.html' %}
{% from 'universal/macro.html' import pagination_show %}{# 导入宏，格式是from 宏所在文件名 import 宏名 #}
{% block title %}{{ article.title }}{% endblock %}
{% block page_content %}
    <h2>{{ article.title }}</h2>
    <p>作者：<a href="{{ url_for('article.search_by_user') }}?user_id={{ article.uid }}">{{ article.user.username }}</a>&nbsp;&nbsp;&nbsp;&nbsp;
        发布时间：{{ moment(article.timestamp).format('YYYY-MM-DD HH:mm:ss') }}&nbsp;&nbsp;&nbsp;&nbsp;{# 数据库里是utc时间戳时，moment().format()显示的是本地时间，传给moment的值不用在数据库的基础上加8 #}
        类型：{{ article.article_type.type_name }}&nbsp;&nbsp;&nbsp;&nbsp;
        阅读量：{{ article.click_times }}&nbsp;&nbsp;&nbsp;&nbsp;
        {% if current_user.is_authenticated and article.user.id==current_user.id %}{# 复制的all_article.html中，但and后的条件不一样 #}
            <button type="button" class="btn btn-default btn-sm">删除</button><!--复制的https://v3.bootcss.com/css/#buttons-sizes-->
        {% endif %}
    </p>
    <div>{{ article.content | safe }}</div><!--注释在all_article.html-->
    <br />
    <div><!--把标签放在div里作为整体，div下面的换行符才有效，使标签和评论产生间距-->
        <span class="label label-info collect_span"><!--收藏点赞按钮复制的all_article.html，去掉了那里手动加的tag属性，并将'i.'改为'article.'-->
            {% if current_user.is_authenticated and current_user.is_collected_or_liked(article.id) %}
                <span class="glyphicon glyphicon-star" aria-hidden="true" id="collect_icon" tag="1">取消收藏{{ article.collect_times }}</span>
            {% else %}
                <span class="glyphicon glyphicon-star-empty" aria-hidden="true" id="collect_icon" tag="0">收藏{{ article.collect_times }}</span>
            {% endif %}
        </span>
        &nbsp;<!--故意加的空格，作两个标签的间隔-->
        <span class="label label-info like_span">
            {% if current_user.is_authenticated and current_user.is_collected_or_liked(article.id) %}
                <span class="glyphicon glyphicon-heart" aria-hidden="true" id="like_icon" tag="1">取消点赞{{ article.star_times }}</span>
            {% else %}
                <span class="glyphicon glyphicon-heart-empty" aria-hidden="true" id="like_icon" tag="0">点赞{{ article.star_times }}</span>
            {% endif %}
        </span>
    </div>
{# 对评论的评论，即楼中楼，放在被评论的对象的<div class="media-body">内，与<div class="media-body">内的<h4 class="media-heading">的缩进一致，
<h4 class="media-heading">后是评论的内容，再往后就放对评论的评论，效果如下面注释掉的一大块div，复制的https://v3.bootcss.com/components/#media-list，
虽然它的示例代码的效果不是一层一层的嵌套，但展示的效果是，可以对效果右键查看源码，然后根据源码看出前面写的嵌套规律。注释里我未限制图片大小，
就是为了显示最大的那张的位置在它回复的评论的内容里，实际用时要限制大小(因链接里示意图里写了宽高) #}
    <!--
    <div>
        <ul class="media-list">
            <li class="media">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object" src="{{ url_for('static',filename='upload/noavatar_small.gif') }}" alt="图片加载失败" data-holder-rendered="true">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading">Media heading</h4>
                    .................................................
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object"
                                     src="{{ url_for('static',filename='upload/noavatar_middle.gif') }}" alt="图片加载失败" data-holder-rendered="true">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Nested media heading</h4>
                            Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin
                            commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.这就是对评论的评论
                            <div class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="{{ url_for('static',filename='upload/noavatar_big.gif') }}" alt="图片加载失败" data-holder-rendered="true">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">Nested media heading</h4>
                                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA这也是对评论的评论
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img class="media-object"
                                     src="{{ url_for('static',filename='upload/noavatar_middle.gif') }}" alt="图片加载失败" data-holder-rendered="true">
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">Nested media heading</h4>
                            BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB这还是
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>-->
    <hr />
    <form action="{{ url_for('article.publish_article2') }}" method="post"><!--action指定接收表单数据的地方，默认是当前路由-->
        <input type="hidden" name="comment_id" value="{{ article.id }}" /><!--表单隐藏域，对前端用户不可见，提交表单时会将value传给服务端，服务端用这里的name接收。也可以直接将值拼接在action里。将被评论的文章的id传给服务端-->
        <input type="hidden" name="article_type" value="{{ article.type_id }}"><!--由于文章和评论共用一个模型，且这里用的发布文章的路由，而发布文章时需选择文章类型，所以发布评论时将评论的类型设为和被评论的文章的类型相同，最好不要设为其他值，如已在发布文章的两个路由里将0设为其他含义，这里不能用-->
        <textarea name="mytextarea" class="form-control" rows="3" placeholder="评论只能在1-10000位之间" maxlength="10000"></textarea><!--复制的https://v3.bootcss.com/css/#%E6%96%87%E6%9C%AC%E5%9F%9F。class的介绍在https://v3.bootcss.com/css/#forms-example，且看页面内前两行文字-->
        <p></p><!--空标签使文本域与发布按钮有一定间隔，且比放个br标签间隔小-->
        <button class="btn btn-default" type="submit">发布</button>
    </form>
    <br />
    <div>{% if not pagination.items %}<span>当前文章还没有任何评论，快来发布评论吧！</span>{% endif %}</div>
    <div>
        {% for i in pagination.items %}
            <ul class="media-list">
                <li class="media">
                    <div class="media-left">
                        <a href="{{ url_for('article.search_by_user') }}?user_id={{ i.uid }}">
                            <img class="media-object" src="{{ url_for('static',filename='upload/'+article.user.portrait_file_name) }}" alt="头像加载失败" data-holder-rendered="true" style="width:64px;height:64px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading"><a href="{{ url_for('article.search_by_user') }}?user_id={{ i.uid }}" style="color:inherit;">{{ i.user.username }}</a></h4><!--inherit使元素呈现出它上一级的颜色(不改的话a标签默认蓝色)，-->
                        <div style="float:right;color:silver;">{{ moment(i.timestamp).fromNow() }}</div><!--复制的all_article.html-->
                        <span>{{ i.content | safe }}</span>
                        {# 若有评论的评论，写在这里(即前面一大块div注释里说的位置)。但detail路由里未查评论的评论，所以暂不支持对评论进行评论及显示评论的评论 #}
                    </div>
                </li>
            </ul>
        {% endfor %}
    </div>
    {% if pagination.items %}{# 没有评论时不显示分页导航条，不加的话没有评论时会显示上/下一页按钮 #}
        {{ pagination_show(pagination,'article.detail',aid=article.id) }}{# 分页显示评论时，因要知道看的哪篇文章的第几页评论，所以点击页码时构造跳转链接中应含被评论的文章的id和要跳转的页码，页码已在pagination对象中，所以需手动传被评论的文章的id。其他注释在all_article.html中 #}
    {% endif %}
{% endblock %}
{% block scripts %}
    {{ super() }}
    <script>
        $(function (){ //收藏点赞的点击事件复制的all_article.html，但修改了Ajax请求的路由和传参方式
            $('.collect_span').click(function (){
                let _this=$(this)
                let tag=_this.children('span').attr('tag')
                $.post("{{ url_for('article.collected_or_liked2') }}",{article_id:{{ article.id }}},function (data){ //发送Ajax请求，同register.html中，和all_article.html中不同
                    if(tag==0){
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-star')
                        _this.children('span').text('取消收藏'+data.number)
                        _this.children('span').attr('tag','1')
                    }else {
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-star-empty')
                        _this.children('span').text('收藏'+data.number)
                        _this.children('span').attr('tag','0')
                    }
                })
            })
            $('.like_span').click(function (){
                let _this=$(this)
                let tag=_this.children('span').attr('tag')
                $.post("{{ url_for('article.collected_or_liked2') }}",{article_id:{{ article.id }}},function (data){
                    if(tag==0){
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-heart')
                        _this.children('span').text('取消点赞'+data.number)
                        _this.children('span').attr('tag','1')
                    }else {
                        _this.children('span').removeClass()
                        _this.children('span').addClass('glyphicon glyphicon-heart-empty')
                        _this.children('span').text('点赞'+data.number)
                        _this.children('span').attr('tag','0')
                    }
                })
            })
            $('.btn-sm').click(function (){
                result=confirm('确定删除文章吗？') //返回布尔类型
                if(result)
                    location.href='{{ url_for('article.delete_article') }}?aid={{ article.id }}' //如果把一个含有URL的字符串赋予Location对象或它的href属性，浏览器就会把新的URL所指的文档装载进来，并显示出来。from https://www.w3school.com.cn/jsref/dom_obj_location.asp。用这种方式时传参都是GET请求
            })
        })
    </script>
{% endblock %}